<template>
    <div class="status-bar" v-cloak >
        <el-space v-if="showRevisionTag" class="mr8">
            <el-tag type="success" v-if="!nextRevision && (revisionLabel == 2 || (revisionLabel == 1 && status === 88))"><vp-label zh="最新" en="Latest"/></el-tag>
			<el-tag type="success" v-if="revisionLabel === 2 && status == 89"><vp-label zh="生效" en="Effective"/></el-tag>
        </el-space>
        <div v-if="fixedValue" class="color-primary">{{ fixedValue }}</div>
        <div v-else>
            <el-tag type="danger" v-if="isValid !== 1"><vp-label zh="删除" en="Delete"/></el-tag>
            <el-tag type="danger" v-if="status === 98"><vp-label :zh="zh(98)" :en="en(98)"/></el-tag>
            <el-tag type="info" v-if="status === 10"><vp-label :zh="zh(10)" :en="en(10)"/></el-tag>
            <el-tag type="primary" v-if="status === 20"><vp-label :zh="zh(20)" :en="en(20)"/></el-tag>
            <el-tag type="primary" v-if="status === 88"><vp-label :zh="zh(88      )" :en="en(88)"/> - {{ processStatus }}</el-tag>
            <el-tag type="success" v-if="status === 89"><vp-label :zh="zh(89)" :en="en(89)"/></el-tag>
            <el-tag type="success" v-if="status === 99"><vp-label :zh="zh(99)" :en="en(99)"/></el-tag>
        </div>
    </div>
</template>
<script setup lang="ts" name="statusBar">
import { computed, ref, watch } from 'vue';
import request from '/@/utils/request';

const props = defineProps({
    // 状态
	status: {
		type: Number,
		required: true,
	},
	// 有效标识
	isValid: {
		type: Number,
		required: true,
	},
	// 业务id
	id: {
		type: String,
		required: true,
	},
    // 最新标识
	revisionLabel: {
		type: Number,
		required: false,
	},
    // 后版本id
	nextRevision: {
		type: String,
		required: false,
	},
    // 是否显示版本标签
	showRevisionTag: {
		type: Boolean,
		required: false,
	},
    // 固定值，如果传入则状态固定为该值
    fixedValue: {
        type: String,
        default: '',
    },
    // 用于替换默认的状态描述
    statusDesc: {
        type: Object,
        required: false,
    }
});

// 默认状态描述
const statusDesc = ref({
    10 : {zh: '草稿', en: 'Draft'},
    20 : {zh: '提交', en: 'Submit'},
    88 : {zh: '审批中', en: 'Processing'},
    89 : {zh: '已审批', en: 'Processed'},
    98 : {zh: '作废', en: 'Invalid'},
    99 : {zh: '关闭', en: 'Closed'},
});

const zh = computed(() => {
    return (status: 10 | 20 | 88 | 89 | 98 | 99) => {
        if (props.statusDesc && props.statusDesc[status]) {
            return props.statusDesc[status].zh;
        }
        return statusDesc.value[status].zh;
    }
});

const en = computed(() => {
    return (status: 10 | 20 | 88 | 89 | 98 | 99) => {
        if (props.statusDesc && props.statusDesc[status]) {
            return props.statusDesc[status].en;
        }
        return statusDesc.value[status].en;
    }
});


const processStatus = ref('');
watch(()=> [props.id, props.status], ()=>{
    if (props.id && props.status === 88 && !processStatus.value) {
        request.get(`/workflow/process/status/${props.id}`).then((res)=>{
            processStatus.value = res.data || '';
        })
    }
})

</script>
<style scoped lang="scss">
    .status-bar {
        position:absolute;
        top: 14px;
        right: 36px;
        display: flex;
    }
    :deep(.el-tag) {
        height: 32px;
    }
</style>